<template>
	<view class="tab-bar">
		<view class="tbar-item"
			v-for="(item,index) in list" :key="index"
		 @tap="changeTab(index)" :class="{selected:currentIndex == index}">
			<image :src="currentIndex == index?item.selectIconPath:item.iconPath" class="taba-icon"></image>
			<view>{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:"tabBar",
		data(){
			return{
				currentIndex:0,
				list:[
					{
						id:0,
						text:"首页",
						iconPath:"../../static/common/sub-back-NS-1.png",
						selectIconPath:"../../static/common/sub-back-YS-1.png"
					},
					{
						id:1,
						text:"赚钱",
						iconPath:"../../static/common/sub-back-NS-2.png",
						selectIconPath:"../../static/common/sub-back-YS-2.png"
					},
					{
						id:2,
						text:"订单",
						iconPath:"../../static/common/sub-back-NS-3.png",
						selectIconPath:"../../static/common/sub-back-YS-3.png"
					},
					{
						id:3,
						text:"个人中心",
						iconPath:"../../static/common/sub-back-NS-4.png",
						selectIconPath:"../../static/common/sub-back-YS-4.png"
					}
				]
			}
		},
		props:{
			device:{
				type:Number
			}
		},
		methods:{
			changeTab(n){
				this.currentIndex = n;
				this.$emit('changeView',n)
			}
		}
	}
</script>

<style scoped>
	.tab-bar{
		width: 100%;
		position: fixed;
		height:75px;
		left: 0;
		bottom: 0;
		background:rgba(17,23,57,1);
		box-shadow:0px 9upx 36upx rgba(0,0,0,0.25);
		opacity:1;
		border-top: 1px solid #F4637A;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.tbar-item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 25%;
		height: 100%;
		font-size: 13px;
		color: #B1B8C1;
	}
	.selected{
		color: #F4637A;
	}
	.taba-icon{
		width: 36upx;
		height: 36upx;
		margin-bottom: 7upx;
	}
</style>
